<template>
  <!-- 精选题库的组件 -->
  <div>
    <!-- 数据记录 -->
    <el-alert
      :title="`共 ${searchResult.counts || 0} 条记录`"
      type="info"
      class="alert"
      show-icon
    />
    <!-- end -->

    <!-- 数据列表 -->
    <el-table
      v-loading="isLoading"
      :data="searchResult.items"
      element-loading-text="给我一点时间"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="120" label="试题编号">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学科">
        <template slot-scope="scope">
          <span>{{ scope.row.subject }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="目录">
        <template slot-scope="scope">
          <span>{{ scope.row.catalog }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="题型">
        <template slot-scope="scope">
          <span>{{
            questionType.find((obj) => obj.value === scope.row.questionType * 1)
              .label
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="280" align="center" label="题干">
        <template slot-scope="scope">
          <span v-html="scope.row.question" />
        </template>
      </el-table-column>
      <el-table-column align="center" width="180" label="录入时间">
        <template slot-scope="scope">
          <span>{{
            scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="难度">
        <template slot-scope="scope">
          <span>{{
            difficulty.find((obj) => obj.value === scope.row.difficulty * 1)
              .label
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="录入人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.creator }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.chkState === 0
              ? "待审核"
              : scope.row.chkState === 1
                ? "已审核"
                : "已拒绝"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核意见" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.chkRemarks }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.chkUser }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发布状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.chkState !== 1
              ? "待发布"
              : scope.row.publishState === 1
                ? "已发布"
                : "已下架"
          }}</span>
        </template>
      </el-table-column>

      <!-- 操作按钮 -->
      <el-table-column
        align="center"
        label="操作"
        width="200"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="topicBtn(scope.row.id,scope.row.questionType)"
          >预览</el-button>
          <el-button
            type="text"
            size="mini"
            :disabled="scope.row.chkState !== 0"
            @click="checkButton(scope.row.id)"
          >
            审核
          </el-button>

          <el-button
            type="text"
            size="mini"
            :disabled="scope.row.publishState === 1"
            @click="
              $router.push({
                path: '/questions/new',
                query: { id: scope.row.id },
              })
            "
          >修改</el-button>
          <el-button
            type="text"
            size="mini"
            :disabled="scope.row.chkState !== 1"
            @click="EditPublish(scope.row.id, scope.row.publishState)"
          >{{ scope.row.publishState === 1 ? "下架" : "上架" }}</el-button>
          <el-button
            v-if="scope.row.status != 'deleted'"
            size="mini"
            type="text"
            :disabled="scope.row.publishState === 1"
            @click="hDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- end -->

    <!-- 审核按钮弹框 -->
    <el-dialog
      title="题目审核"
      :visible.sync="checkDialog"
      width="30%"
      :before-close="beforeDialogClose"
    >
      <el-form
        ref="checkForm"
        :model="checkForm"
        :rules="rules"
        :show-message="false"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-radio
            v-model="checkForm.chkState"
            :label="Number(1)"
          >通过</el-radio>
          <el-radio
            v-model="checkForm.chkState"
            :label="Number(2)"
          >拒绝</el-radio>
        </el-form-item>

        <el-form-item prop="chkRemarks" class="checkArea">
          <el-input
            v-model="checkForm.chkRemarks"
            type="textarea"
            placeholder="请输入审核意见"
          />
        </el-form-item>

        <el-form-item>
          <div class="areaButton">
            <el-button @click="checkDialog = false">取 消</el-button>
            <el-button type="primary" @click="checkSubmit">确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 预览组件弹框 -->
    <el-dialog
      v-if="topicDialog"
      title="题目预览"
      :visible.sync="topicDialog"
      width="50%"
    >
      <TopicPreview
        :tp-type="tpType"
        :tp-id="tpId"
        @close="topicDialog = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import { choiceCheck, choicePublish, choiceAdd } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  props: {
    searchResult: {
      // 搜索结果列表
      type: Object,
      required: true
    }

  },
  data() {
    return {
      isLoading: false,
      checkDialog: false, // 审核弹框是否显示
      checkForm: {
        chkState: 1, // 题目审核
        chkRemarks: '', // 审核意见
        id: '' // 审核题目Id
      },
      rules: {
        chkRemarks: [{ required: true }]
      },
      difficulty, // 难度数据
      questionType, // 题型数据
      topicDialog: false, // 题目预览弹窗
      tpType: '', // 题目类型
      tpId: '' // 预览题目id
    }
  },

  methods: {
    // 预览题目按钮
    topicBtn(tpId, tpType) {
      this.topicDialog = true
      this.tpId = tpId
      this.tpType = tpType
    },

    // 关闭审核弹窗前
    beforeDialogClose() {
      this.checkDialog = false
      this.checkForm = {
        chkState: 1, // 题目审核
        chkRemarks: '', // 审核意见
        id: ''
      }
    },

    // 审核按钮
    checkButton(id) {
      // 传递本题id
      this.checkForm.id = id
      // 显示弹框
      this.checkDialog = true
    },

    // 弹框确定按钮
    checkSubmit() {
      // 兜底验证
      this.$refs.checkForm.validate(async(valid) => {
        if (valid) {
          // 通过验证
          // 调接口
          await choiceCheck(this.checkForm)
          this.$message.success('操作成功')
          // 刷新列表
          this.$emit('getQuestion')
          // 关闭弹窗
          this.checkDialog = false
          // 清空表单
          this.checkForm = {
            chkState: 1, // 题目审核
            chkRemarks: '', // 审核意见
            id: ''
          }
        } else {
          // 未通过验证
          this.$message.warning('请输入审核意见')
          return false
        }
      })
    },

    // 点击修改上架下架
    EditPublish(id, publishState) {
      // 询问框
      // 更改为下架
      this.$confirm(
        `您确定${publishState ? '下架' : '上架'}这道题目吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async() => {
          if (publishState === 1) {
            publishState = 0
          } else {
            publishState = 1
          }
          // 调接口
          await choicePublish({ id, publishState })
          // 刷新列表
          this.$emit('getQuestion')
          // 提示信息
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {})
    },

    // 删除按钮
    hDelete(id) {
      // 警告确认框
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await choiceAdd({ id, choiceState: 0 })
          // console.log(res)
          // 更新列表
          this.$emit('getQuestion')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$emit('Changepage')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-width .el-button--mini {
  padding: 7px 10px;
  width: 15px;
}
.checkArea {
  margin-bottom: 40px;
  margin-top: 20px;
}
.areaButton {
  text-align: right;
}
</style>
